ארכיטקטורת פלאגינים עם JavaScript Module Federation: בניית מערכת פלאגינים דינמית

בנוף פיתוח הווב המורכב של ימינו, בניית יישומים מודולריים, סקלביליים וקלים לתחזוקה היא קריטית. טכניקה עוצמתית להשגת זאת היא באמצעות ארכיטקטורת פלאגינים, שבה פונקציונליות מחולקת למודולים עצמאיים הנטענים באופן דינמי. JavaScript Module Federation, תכונה של Webpack 5, מספקת מנגנון חזק ליישום ארכיטקטורות כאלה. מאמר זה צולל לנבכי השימוש ב-Module Federation לבניית מערכת פלאגינים דינמית.

מהי Module Federation?

Module Federation מאפשרת ליישומי JavaScript לשתף קוד באופן דינמי בזמן ריצה. פירוש הדבר שמודול (קטע קוד) מיישום אחד יכול להיות בשימוש ישיר על ידי יישום אחר, ללא צורך בבנייה או פריסה מחדש. הדבר מושג על ידי חשיפה וצריכה של מודולים בין בניות שונות ואף פריסות שונות.

שיטות מסורתיות לשיתוף קוד, כמו חבילות npm, דורשות בנייה ופריסה מחדש של היישומים הצורכים בכל פעם שתלות משותפת מתעדכנת. Module Federation מבטלת את התקורה הזו, מה שהופך אותה לאידיאלית עבור תרחישים שבהם נדרשים עדכונים תכופים ופריסות עצמאיות.

מדוע להשתמש ב-Module Federation לארכיטקטורות פלאגינים?

Module Federation מציעה מספר יתרונות בעת בניית ארכיטקטורות פלאגינים:

• טעינת מודולים דינמית: ניתן לטעון ולפרוק פלאגינים בזמן ריצה, מה שמאפשר ליישומים להסתגל לדרישות משתנות ללא צורך בפריסה מלאה מחדש.
• הפרדה (Decoupling): פלאגינים מפותחים ונפרסים באופן עצמאי, מה שמפחית תלויות בין חלקים שונים של היישום.
• סקלביליות: ניתן להרחיב את היישום בקלות עם פלאגינים חדשים מבלי להשפיע על פונקציונליות קיימת.
• תחזוקתיות: ניתן לעדכן ולתחזק פלאגינים באופן עצמאי, מה שמקטין את הסיכון להכנסת באגים ליישום הליבה.
• שימוש חוזר בקוד: ניתן לעשות שימוש חוזר בפלאגינים על פני מספר יישומים, מה שמקדם עקביות ומפחית את מאמץ הפיתוח.
• ניהול גרסאות ושחזורים (Rollbacks): ניתן לנהל גרסאות שונות של פלאגינים ולשחזר בקלות לגרסאות קודמות במידת הצורך.

מושגי ליבה: קונטיינר מארח (Host) וקונטיינר מרוחק (Remote)

Module Federation סובבת סביב שני מושגי מפתח:

• קונטיינר מארח (Host): היישום הראשי שצורך את המודולים המרוחקים (הפלאגינים).
• קונטיינר מרוחק (Remote): היישום שחושף מודולים (פלאגינים) לצריכה על ידי המארח.

הקונטיינר המארח מביא באופן דינמי את קובץ הכניסה המרוחק (remote entry) מהקונטיינר המרוחק, המכיל מניפסט של המודולים החשופים. לאחר מכן, המארח יכול לגשת ולהשתמש במודולים אלה כאילו היו חלק מבסיס הקוד שלו.

יישום מערכת פלאגינים דינמית עם Module Federation: מדריך צעד-אחר-צעד

בואו נעבור על תהליך בניית מערכת פלאגינים פשוטה באמצעות Module Federation. ניצור יישום מארח ויישום פלאגין מרוחק.

1. הגדרת היישום המארח (Host Container)

ראשית, צרו ספריית פרויקט חדשה ואתחלו פרויקט npm חדש:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

התקינו את Webpack ואת התלויות שלו:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

צרו קובץ `webpack.config.js` בספריית `host-app` עם התצורה הבאה:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

הסבר:

• `name`: שם היישום המארח.
• `remotes`: מגדיר את הקונטיינרים המרוחקים שהמארח יצרוך. במקרה זה, הוא צורך קונטיינר מרוחק בשם `plugin` מהכתובת `http://localhost:3001/remoteEntry.js`. התחביר `Plugin@` אומר שה-`name` של ה-ModuleFederationPlugin של הקונטיינר המרוחק הוא 'Plugin'.
• `shared`: מפרט את התלויות המשותפות בין המארח לקונטיינרים המרוחקים. זה מונע טעינת עותקים כפולים של תלויות אלו. השימוש ב-`shared` הוא קריטי למניעת שגיאות ולהבטחת תפקוד תקין של הפלאגין.

צרו ספריית `src` והוסיפו קובץ `index.js` עם התוכן הבא:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

הסבר:

• אנו משתמשים ב-`React.lazy` כדי לייבא באופן דינמי את ה-`PluginComponent` מהקונטיינר המרוחק `plugin`. זה חיוני לטעינה עצלה (lazy loading) של הפלאגין ולמניעת עיכובים בטעינה הראשונית.
• קומפוננטת `Suspense` משמשת לטיפול במצב הטעינה בזמן שהפלאגין נטען.

צרו ספריית `public` והוסיפו קובץ `index.html` עם התוכן הבא:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

הוסיפו קובץ תצורת Babel בשם `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

עדכנו את קובץ ה-`package.json` שלכם עם סקריפט התחלה:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. הגדרת היישום המרוחק (Plugin Container)

צרו ספריית פרויקט חדשה עבור הפלאגין:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

התקינו את Webpack ואת התלויות שלו:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

צרו קובץ `webpack.config.js` בספריית `plugin-app` עם התצורה הבאה:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

הסבר:

• `name`: שם הקונטיינר המרוחק (הפלאגין). שם זה חייב להיות זהה לשם שבו נעשה שימוש בתצורת ה-`remotes` של המארח.
• `filename`: שם קובץ הכניסה המרוחק שהמארח יביא.
• `exposes`: מגדיר את המודולים שנחשפים על ידי הקונטיינר המרוחק. במקרה זה, אנו חושפים את המודול `PluginComponent`. המפתח './PluginComponent' הוא זה שבו נעשה שימוש בפקודת ה-import של המארח (למשל, `import('plugin/PluginComponent')`).
• `shared`: בדומה למארח, מפרט את התלויות המשותפות. חיוני שהתלויות המשותפות והגרסאות שלהן יהיו תואמות בין המארח למרוחק.

צרו ספריית `src` והוסיפו קובץ `PluginComponent.jsx` עם התוכן הבא:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

צרו קובץ `index.js` בספריית `src` כדי לייצא את ה-PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

צרו ספריית `public` והוסיפו קובץ `index.html` עם התוכן הבא:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

הוסיפו קובץ תצורת Babel בשם `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

עדכנו את קובץ ה-`package.json` שלכם עם סקריפט התחלה:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. הפעלת היישומים

התחילו הן את היישום המארח והן את יישום הפלאגין על ידי הרצת `npm start` בספריות המתאימות שלהם.

נווטו ל-`http://localhost:3000` בדפדפן שלכם. אתם אמורים לראות את היישום המארח עם קומפוננטת הפלאגין שנטענה באופן דינמי.

תכונות מתקדמות ושיקולים

ניהול גרסאות ושחזורים

Module Federation תומכת בניהול גרסאות, ומאפשרת לכם לנהל גרסאות שונות של פלאגינים. ניתן לציין אילוצי גרסה בתצורת ה-`remotes` של המארח. לדוגמה:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

זה מורה למארח להשתמש בגרסה 1.0.0 של הפלאגין. אם תהיה זמינה גרסה חדשה יותר, המארח ימשיך להשתמש בגרסה שצוינה עד לעדכון מפורש. יישום ניהול גרסאות חזק הוא קריטי למניעת שינויים שוברים ולהבטחת יציבות היישום.

שיקולי אבטחה

בעת שימוש ב-Module Federation, אבטחה היא בעלת חשיבות עליונה. קחו בחשבון את הנקודות הבאות:

• אימות והרשאה: ישמו מנגנוני אימות והרשאה נאותים כדי להבטיח שרק משתמשים מורשים יוכלו לגשת ולהשתמש בפלאגינים.
• שלמות הקוד: ודאו את שלמות המודולים המרוחקים כדי למנוע הזרקת קוד זדוני ליישום. שקלו שימוש ב-Content Security Policy (CSP) כדי להגביל את המקורות מהם היישום יכול לטעון משאבים.
• ניהול תלויות: נהלו בקפידה את התלויות הן של המארח והן של הקונטיינרים המרוחקים כדי למנוע פגיעויות. עדכנו תלויות באופן קבוע לגרסאות האחרונות.
• אימות קלט: ודאו את כל הנתונים המתקבלים ממודולים מרוחקים כדי למנוע התקפות הזרקה.
• CORS (Cross-Origin Resource Sharing): הגדירו את CORS כראוי כדי לאפשר ליישום המארח לגשת לקובץ הכניסה המרוחק מיישום הפלאגין.

גילוי וניהול פלאגינים

עבור מערכות פלאגינים מורכבות יותר, ייתכן שתצטרכו מנגנון לגילוי וניהול פלאגינים. ניתן להשיג זאת באמצעות רישום פלאגינים (plugin registry) או שירות גילוי. רישום מרכזי יכול לאחסן מידע על פלאגינים זמינים, כולל מיקומם, גרסתם ותלויותיהם. היישום המארח יכול אז לשלוח שאילתה לרישום כדי למצוא ולטעון את הפלאגינים המתאימים.

שקלו את הגישות הבאות:

• תצורה מרכזית: אחסנו את כתובות ה-URL של הפלאגינים בקובץ תצורה מרכזי (למשל, קובץ JSON) שהיישום המארח קורא בזמן ריצה. זה מאפשר להוסיף, להסיר או לעדכן פלאגינים בקלות מבלי לפרוס מחדש את היישום המארח.
• גילוי מבוסס API: צרו נקודת קצה (API endpoint) שמחזירה רשימה של פלאגינים זמינים. היישום המארח יכול אז להביא רשימה זו ולטעון את הפלאגינים באופן דינמי.
• ארכיטקטורה מונחית אירועים (Event-Driven): השתמשו ב-event bus או בתור הודעות כדי להודיע ליישום המארח כאשר פלאגינים חדשים זמינים. זה מאפשר גילוי וטעינה אסינכרוניים של פלאגינים.

תצורה דינמית והפעלת פלאגינים

אפשרות למשתמשים להגדיר ולהפעיל פלאגינים באופן דינמי היא תכונה רבת עוצמה. הדבר דורש מנגנון לאחסון וניהול תצורות של פלאגינים. ניתן להשתמש במסד נתונים, קובץ תצורה או שירות תצורה מבוסס ענן לאחסון הגדרות פלאגינים. היישום המארח יכול אז לקרוא הגדרות אלה בזמן ריצה ולהפעיל את הפלאגינים בהתאם. שקלו לספק ממשק משתמש לניהול תצורות הפלאגינים.

טיפול בפעולות אסינכרוניות וטיפול בשגיאות

בעבודה עם פלאגינים הנטענים דינמית, חיוני לטפל בפעולות אסינכרוניות ובשגיאות בחן. השתמשו ב-`async/await` או ב-Promises לניהול קוד אסינכרוני. ישמו טיפול שגיאות נאות כדי לתפוס ולרשום כל שגיאה המתרחשת במהלך טעינת הפלאגין או הרצתו. ספקו הודעות שגיאה אינפורמטיביות למשתמש. שקלו שימוש בשירות רישום שגיאות מרכזי למעקב אחר שגיאות בכל הפלאגינים.

פיצול קוד (Code Splitting) ואופטימיזציית ביצועים

כדי לבצע אופטימיזציה של ביצועים, השתמשו בפיצול קוד כדי לחלק את היישום והפלאגינים לנתחים קטנים יותר. זה מאפשר לדפדפן להוריד רק את הקוד הדרוש לדף או תכונה מסוימת. Webpack מספק תמיכה מובנית בפיצול קוד. שקלו שימוש בטעינה עצלה (lazy loading) כדי לטעון פלאגינים רק כאשר הם נחוצים. הקטינו ודחסו את הקוד כדי להקטין את גודל הקובץ.

בדיקות ואינטגרציה רציפה

בדקו היטב את מערכת הפלאגינים שלכם כדי להבטיח שהיא פועלת כראוי. כתבו בדיקות יחידה, בדיקות אינטגרציה ובדיקות קצה-לקצה. השתמשו במערכת אינטגרציה רציפה (CI) להרצת בדיקות אוטומטית בכל פעם שהקוד משתנה. ישמו צינור מסירה רציפה (CD) לאוטומציה של פריסת היישום והפלאגינים.

דוגמאות מהעולם האמיתי ומקרי שימוש

Module Federation נמצאת בשימוש במגוון יישומים בעולם האמיתי, כולל:

• פלטפורמות מסחר אלקטרוני: טעינה דינמית של המלצות מוצרים, שערי תשלום וספקי משלוחים. לדוגמה, פלטפורמת מסחר אלקטרוני גלובלית יכולה להשתמש ב-Module Federation כדי לשלב ספקי תשלום שונים בהתבסס על מיקום הלקוח. בצפון אמריקה, היא עשויה לטעון פלאגין עבור Stripe, בעוד שבאירופה, היא עשויה לטעון פלאגין עבור PayPal או Klarna.
• מערכות ניהול תוכן (CMS): מאפשרות למשתמשים להתקין ולהפעיל פלאגינים להרחבת הפונקציונליות של ה-CMS. מערכת CMS יכולה לאפשר למשתמשים להתקין פלאגינים לאופטימיזציית SEO, אינטגרציה עם רשתות חברתיות או ניתוח תוכן.
• לוחות מחוונים (Dashboards) ופלטפורמות אנליטיקה: טעינה דינמית של ווידג'טים וויזואליזציות שונות. פלטפורמת אנליטיקה גלובלית עשויה לטעון פלאגינים עבור מקורות נתונים שונים, כגון Google Analytics, Adobe Analytics או Salesforce.
• ארכיטקטורות מיקרו-פרונטאנדים: בניית יישומי ווב רחבי היקף כאוסף של מיקרו-פרונטאנדים הניתנים לפריסה עצמאית. ארגון גדול יכול להשתמש ב-Module Federation כדי לבנות את יישום הווב שלו כאוסף של מיקרו-פרונטאנדים, שכל אחד מהם אחראי על פונקציה עסקית ספציפית, כגון ניהול חשבונות, קטלוג מוצרים או עיבוד הזמנות.
• מערכות עיצוב (Design Systems): שיתוף רכיבי ממשק משתמש ומשתני עיצוב (design tokens) על פני מספר יישומים. ארגון גלובלי עם מותגים מרובים יכול להשתמש ב-Module Federation כדי לשתף מערכת עיצוב משותפת בכל היישומים שלו, תוך הבטחת עקביות והפחתת מאמץ הפיתוח.

שיטות עבודה מומלצות לבניית מערכות פלאגינים דינמיות עם Module Federation

להלן מספר שיטות עבודה מומלצות שכדאי לזכור בעת בניית מערכות פלאגינים דינמיות עם Module Federation:

• שמרו על פלאגינים קטנים וממוקדים: כל פלאגין צריך להיות אחראי על פונקציונליות ספציפית. זה מקל על תחזוקה ועדכון של הפלאגינים.
• הגדירו ממשקי פלאגינים ברורים: הגדירו ממשקים ברורים לאופן שבו פלאגינים מתקשרים עם היישום המארח. זה מבטיח שהפלאגינים תואמים למארח ומונע שינויים שוברים.
• השתמשו בניהול גרסאות סמנטי: השתמשו בניהול גרסאות סמנטי כדי לנהל את גרסאות הפלאגינים שלכם. זה מקל על מעקב אחר שינויים והבטחת תאימות.
• ספקו תיעוד: ספקו תיעוד ברור ותמציתי עבור הפלאגינים שלכם. זה עוזר למשתמשים להבין כיצד להתקין, להגדיר ולהשתמש בפלאגינים.
• ישמו שיטות עבודה מומלצות לאבטחה: עקבו אחר שיטות עבודה מומלצות לאבטחה כדי להגן על היישום והפלאגינים שלכם מפני פגיעויות.
• נטרו את ביצועי הפלאגינים: נטרו את ביצועי הפלאגינים שלכם כדי לזהות צווארי בקבוק. בצעו אופטימיזציה של הקוד כדי לשפר את הביצועים.
• בצעו פריסה אוטומטית: בצעו אוטומציה של פריסת היישום והפלאגינים שלכם. זה מפחית את הסיכון לשגיאות ומבטיח שעדכונים נפרסים במהירות.
• השתמשו בסגנון קידוד עקבי: אכפו סגנון קידוד עקבי בכל הפלאגינים. זה הופך את הקוד לקל יותר לקריאה ולתחזוקה.
• כתבו בדיקות יחידה: כתבו בדיקות יחידה עבור הפלאגינים שלכם כדי להבטיח שהם פועלים כראוי.
• השתמשו בלינטר (Linter): השתמשו בלינטר כדי לבדוק את הקוד שלכם באופן אוטומטי לאיתור שגיאות.

סיכום

JavaScript Module Federation מספקת מנגנון חזק וגמיש לבניית מערכות פלאגינים דינמיות. על ידי מינוף Module Federation, תוכלו ליצור יישומים מודולריים, סקלביליים וקלים לתחזוקה שיכולים להסתגל לדרישות משתנות. על ידי ביצוע שיטות העבודה המומלצות המתוארות במאמר זה, תוכלו לבנות מערכות פלאגינים חזקות ומאובטחות העונות על צרכי הארגון שלכם.

טכנולוגיה זו בעלת ערך במיוחד בהקשרים בינלאומיים, ומאפשרת לעסקים להתאים את היצע התוכנה שלהם לאזורים ספציפיים או לפלחי לקוחות מבלי לפרוס יישומים נפרדים לחלוטין. משילוב שערי תשלום מקומיים ועד לאספקת תוכן ספציפי לאזור, Module Federation מאפשרת חווית משתמש מותאמת אישית ויעילה יותר ברחבי העולם.